<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <text class="header-title">搜索</text>
      <view class="search-box">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input
          class="search-input"
          type="text"
          placeholder="搜作品/作者/Token ID"
          placeholder-class="placeholder"
        />
      </view>
      <view class="author-header">
        <text class="author-title">关注的作者</text>
        <uni-icons type="bell" size="18" color="#333"></uni-icons>
      </view>
    </view>
    <!-- 作者网格布局 -->
    <view class="authors-grid">
      <!-- 循环渲染作者卡片 -->
      <view
        class="author-card"
        v-for="author in filteredAuthors"
        :key="author.id"
        @click="navigateToAuthor(author.id)"
      >
        <view class="card-top">
          <img
            class="bg-image"
            src="/static/images/card3.png"
            mode="aspectFill"
          />
        </view>
        <view class="avatar-container">
          <img
            class="avatar"
            :src="author.avatar || '/static/images/heart.png'"
            mode="aspectFill"
          />
        </view>
        <view class="card-bottom">
          <text class="author-name">{{ author.name }}</text>
          <view class="likes">
            <uni-icons
              type="heart-filled"
              size="14"
              color="#ff6b6b"
            ></uni-icons>
            <text>{{ formatNumber(author.likes) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredAuthors.length === 0">
      <!-- <image src="/static/images/empty.png" mode="aspectFit"></image> -->
      <text>暂无关注的作者</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";

// 响应式数据
const searchText = ref("");
const authors = ref([]);
const isLoading = ref(false);

// 模拟获取作者数据
const fetchAuthors = async () => {
  isLoading.value = true;
  try {
    // 这里应该是实际API请求
    // const res = await uni.request({ url: 'api/authors' })

    // 模拟数据
    authors.value = [
      {
        id: 1,
        name: "HUGO",
        avatar: "/static/images/heart.jpg",
        likes: 2392,
      },
      {
        id: 2,
        name: "默默小佛",
        avatar: "/static/images/heart.jpg",
        likes: 1856,
      },
      {
        id: 3,
        name: "Color Bear",
        avatar: "/static/images/heart.jpg",
        likes: 3120,
      },
      { id: 4, name: "Z", avatar: "/static/images/heart.jpg", likes: 892 },
      {
        id: 5,
        name: "Noah969",
        avatar: "/static/images/heart.jpg",
        likes: 1567,
      },
      {
        id: 6,
        name: "LUCKY琉璃猫",
        avatar: "/static/images/heart.jpg",
        likes: 2453,
      },
    ];
  } catch (error) {
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  } finally {
    isLoading.value = false;
    uni.stopPullDownRefresh();
  }
};

// 计算属性 - 过滤后的作者列表
const filteredAuthors = computed(() => {
  if (!searchText.value) return authors.value;
  return authors.value.filter((author) =>
    author.name.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

// 搜索处理
const handleSearch = () => {
  // 可以添加防抖逻辑
  console.log("搜索:", searchText.value);
};

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + "w";
  }
  return num;
};

// 跳转到作者详情
const navigateToAuthor = (id) => {
  uni.navigateTo({
    url: `/pages/author/detail?id=${id}`,
  });
};

// 生命周期钩子
onMounted(() => {
  fetchAuthors();
});

// 下拉刷新
onPullDownRefresh(() => {
  fetchAuthors();
});

// 上拉加载更多
onReachBottom(() => {
  // 这里实现加载更多逻辑
  console.log("加载更多");
});
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
  background-color: #f8f9fa;
  padding-bottom: 40rpx;
}

/* 顶部搜索栏 */
.search-header {
  background-color: #fff;
  padding: 30rpx 30rpx 0; /* 增加顶部内边距 */
  position: sticky;
  top: 0;
  z-index: 100;

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin-bottom: 40rpx; /* 增加与搜索框的距离 */
    margin-top: 20rpx; /* 增加顶部间距 */
    display: block;
    width: 100%;
  }

  .search-box {
    background-color: #f5f5f5;
    border-radius: 40rpx;
    height: 80rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx; /* 增加与下方元素的间距 */

    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      margin-left: 20rpx;
      height: 100%;
    }

    .placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }

  .author-header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;

    .author-title {
      font-size: 30rpx;
      color: #333;
      margin-right: 10rpx;
      font-weight: 500;
    }
  }
}

/* 作者网格布局 */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
  padding: 30rpx;
}

.author-card {
  background-color: #fff;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;

  &:active {
    transform: translateY(-10rpx);
    box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.12);
  }
}

/* 卡片顶部背景 */
.card-top {
  height: 200rpx;
  position: relative;
  overflow: hidden;

  .bg-image {
    width: 100%;
    height: 100%;
  }
}

/* 圆形头像 */
.avatar-container {
  position: absolute;
  top: 120rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
  z-index: 2;

  .avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
  }
}

/* 底部作者信息 */
.card-bottom {
  padding: 100rpx 30rpx 40rpx;
  text-align: center;

  .author-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .likes {
    font-size: 24rpx;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      margin-left: 10rpx;
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  image {
    width: 300rpx;
    height: 300rpx;
    opacity: 0.5;
    margin-bottom: 40rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 响应式调整 */
@media (max-width: 480px) {
  .authors-grid {
    gap: 24rpx;
    padding: 24rpx;
  }

  .card-top {
    height: 180rpx;
  }

  .avatar-container {
    width: 140rpx;
    height: 140rpx;
    top: 100rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .card-bottom {
    padding-top: 90rpx;
  }
}
</style>
